<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入vue.js -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
    <!-- 2.创建容器 -->
   <div id="app">
    <p>用户名：{{username}}</p>
    <p>性别：{{ismale?'男':'女'}}</p>
    <p>年龄：{{age}}</p>
    <p>爱好：{{hobbies[0]}}</p>
    <p>爱好：{{hobbies[1]}}</p>
    <p>配偶：{{gf.name}}</p>
    <p>配偶身高：{{gf.high}}</p>
   </div>
    
   <!-- 3.创建app实例 -->
    <script>
        const {createApp} = Vue;
        createApp({
            data(){
                return{
                    username: '张三',
                    age: 20,
                    hobbies: ['跑步', '游泳', '打篮球'],
                    ismale: true,
                    gf: {
                        name:'小美',
                        high:'168cm',
                        weight:'50kg',
                        age:'22'
                }
                }
            },
        }).mount('#app')
            // data:function
    </script>
</body>
</html>